<script setup lang="ts">
import {reactive, ref} from 'vue'
import {del, page, save, update} from '../../api/category'
import {ElMessage} from 'element-plus'

const tableData = ref([])
const loadding = ref(false)
const pageSize = ref(10)
const recordCount = ref(1)
const currPage = ref(1)
const pageCount = ref(0)


const classData = reactive({
  id: 0,
  dialogVisible: false,
  title: '',
  name: '',
  sort: 10,
  type: 1,
})


// 添加
const addClass = (type: number) => {
  if (type == 1) {
    classData.title = '新增菜品分类'
    classData.type = type
  } else if (type == 2) {
    classData.title = '新增套餐分类'
    classData.type = type
  }
  classData.dialogVisible = true
}

const handleSizeChange = (item: number) => {
  pageSize.value = item
  init(currPage.value, pageSize.value)
}

const handleClose = () => {
}
const handleCurrentChange = (cp: number) => {
  currPage.value = cp
  init(currPage.value, pageSize.value)
}
const submitForm = async () => {
  classData.dialogVisible = false
  if (classData.id == 0) {
    //新增 类别
    const cd = {
      name: classData.name,
      type: classData.type,
      sort: classData.sort,
      createUser: localStorage.getItem("id"),
      updateUser: localStorage.getItem("id"),
    }
    const result: any = await save(cd);
    const {code, msg} = result
    if (code == 200) {
      ElMessage.success(msg)
      await init(currPage.value, pageSize.value)
    } else {
      ElMessage.error(msg)
    }
  } else {
    //编辑 类别
    const cd = {
      name: classData.name,
      type: classData.type,
      sort: classData.sort,
      id: classData.id,
      createUser: localStorage.getItem("id"),
      updateUser: localStorage.getItem("id"),
    }
    classData.id = 0
    const result: any = await update(cd);
    const {code, msg} = result
    if (code == 200) {
      ElMessage.success(msg)
      await init(currPage.value, pageSize.value)
    } else {
      ElMessage.error(msg)
    }
  }
}

const handleSelectionChange = () => {

}

const init = async (cp: number, ps: number) => {
  loadding.value = true
  const result: any = await page({currPage: cp, pageSize: ps})
  const {data, code, msg} = result
  tableData.value = data
  loadding.value = false
  currPage.value = parseInt(msg.currPage)
  recordCount.value = parseInt(msg.recordCount)
  loadding.value = false
}

init(currPage.value, pageSize.value)

const edit = (item: any) => {
  classData.dialogVisible = true
  classData.title = '编辑类别'
  classData.name = item.name
  classData.type = item.type
  classData.sort = item.sort
  classData.id = item.id
}

const dele = async (id: string) => {
  const result: any = await del({id})
  const {code, msg} = result
  if (code == 200) {
    ElMessage.success(msg)
    await init(currPage.value, pageSize.value)
  } else {
    ElMessage.error(msg)
  }
}
</script>

<template>
  <el-dialog
      :title="classData.title"
      v-model="classData.dialogVisible"
      width="30%"
      destroy-on-close
      :close-on-click-modal="true"
      :close-on-press-escape="true"
      center
  >
    <el-form class="demo-form-inline" label-width="100px">
      <el-form-item label="分类名称：">
        <el-input v-model="classData.name" placeholder="请输入分类名称" maxlength="14"/>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input v-model="classData.sort" type="number" placeholder="请输入排序"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button size="small" @click="classData.dialogVisible = false">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm">确 定</el-button>
    </template>
  </el-dialog>

  <el-row>
    <el-col style="padding-bottom: 15px;">
      <el-button type="primary" size="small" @click="addClass(1)">新增菜品分类</el-button>
      <el-button type="success" size="small" @click="addClass(2)">新增套餐分类</el-button>
    </el-col>
    <el-col>
      <el-table
          :data="tableData"
          width="100%"
          border
          small
          empty-text="没有菜品类型数据"
          v-loading="loadding"
          element-loading-background="rgba(255, 255, 255, .5)"
          element-loading-text="加载中，请稍后..."
          stripe
          size="small"
          @selection-change="handleSelectionChange">
        <el-table-column prop="name" label="分类名称" width="120"/>
        <el-table-column prop="type" label="分类类别" width="120"/>
        <el-table-column prop="createTime" label="建立时间" width="220"/>
        <el-table-column prop="sort" label="排序" width="120"/>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button size="small" type="success" @click="edit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="dele(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col>
      <el-pagination
          small
          class="pageList"
          :page-sizes="[5,10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="recordCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </el-col>
  </el-row>
</template>

<style scoped>
.pageList {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>
